<template>
  <div class="header-main" @mouseover="mouseEnter()" @mouseleave="mouseLeave()">
    <div class="header-main-title">
      <a href="#">Lin | website</a>
    </div>
    <div class="header-main-title-list">
      <ul>
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Project</a>
        </li>
        <li>
          <a href="#">Experience</a>
        </li>
        <li>
          <a href="#">Contact</a>
        </li>
      </ul>
    </div>

    <div class="header-main-title-icon">
      <a href="#">
        <img src="/icons/menu.svg" alt="github" ">
      </a>
    </div>
    

  </div>
</template>


<script lang="ts">
import { gsap } from 'gsap'

export default defineComponent({

  setup(){

    const data = reactive({
      timer: ref(),
      state: ref(),
      sizeState: {
        "BIG": "big",
        "SMALL": "small"
      },
      Header_Background: ref(),
      Header_A: ref(),
      
    })

    const tween = gsap.timeline({delay: 0.8})

    // 防抖，只获取一次resize
    function debounce(fn: { (): void; (): void; }, delay: number | undefined) {
      return async function() {
        if (data.timer) {
          clearTimeout(data.timer);
        }
        data.timer = setTimeout(() => {
          fn();
        }, delay);
      }
    };



    const headerResize = async() => {
      data.state = data.sizeState.BIG
      let width = window.innerWidth > 900 ? data.sizeState.BIG : data.sizeState.SMALL
      if(data.state !== width){
        hidden()
        return
      }
      display()
    }

    const cancalDebounce = debounce(headerResize, 500)




    const hidden = async() => {
      tween.to('.header-main-title-list ul', {duration: 0.6, ease: "power2", opacity: 0, x: 300, display: "none"})
      tween.fromTo('.header-main-title-icon', {duration: 0.3, ease: "power2", opacity: 0, x: 300}, {duration: 0.6, ease: "power2", opacity: 1, x: 0, display: "flex"})
    }


    const display = async() => {
      tween.fromTo('.header-main-title-icon', {duration: 0.3, ease: "power2", opacity: 1, x: 0}, {duration: 0.6, ease: "power2", opacity: 0, x: 300, display: "none"})
      tween.to('.header-main-title-list ul', {duration: 0.3, ease: "power2", opacity: 1, x: 0, display: "flex"})
    }


    const mouseEnter = async() => {
      let scrollTop = window.screenY || document.documentElement.scrollTop;
      data.Header_Background = document.querySelector('.header-main')
      data.Header_A = document.querySelectorAll('.header-main a')
      if (data.Header_Background && data.Header_A) {
        data.Header_Background.classList.add('active')
        data.Header_A.forEach((a: any) => {
          a.classList.add('active');
        });
      }
    }




    const mouseLeave = async() => {
      data.Header_Background.classList.remove('active')
      data.Header_A.forEach((a: any) => {
          a.classList.remove('active');
        });
    }





    

    onMounted(() => {
      cancalDebounce()
      window.addEventListener('resize', cancalDebounce)
    })
    
    onUnmounted(() => {
      window.removeEventListener('resize', cancalDebounce)
    })

    





      
    return{
      ...toRefs(data),
      mouseEnter,
      mouseLeave
    }
  }
})



</script>



<style scoped>

  a {
    color: #666666;
  }

  .header-main {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 4em;
    transition: all 0.5s ease-in-out;
  }


  .header-main.active {
    background-color: rgb(255, 255, 255);
    border-bottom: 1px rgb(201, 201, 201) solid;
  }

  .header-main a {
    color: var(--main-text-color);
  }

  .header-main a.active {
    color: rgb(104, 104, 104);
  }




  .header-main-title-list {
    width: 300px;
    height: auto;

  }


  .header-main-title-list ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }



  .header-main-title-list ul li:not(:last-child) {
    margin-right: 80px;
  }

  .header-main-title-list a {
    position: relative;
    font-size: 15px;
  }

  .header-main-title-list a::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -22px;
    border-bottom: 2px solid rgb(0, 0, 0); /* 下划线大小，颜色 */
    width: 0; /* 初始下划线宽度为0，悬停时变化 */
    height: 100%; /* 下划线高度，可以根据需要调整 */
    transition: all 0.3s; /* 添加过渡效果 */
  }

  .header-main-title-list a:hover::before {
    content: '';
    width: 100%;
    left: 0px;
    display: inline-block;
  }


  .header-main-title-icon {
    display: none;
  }

  .header-main-title-icon a {
    filter: invert(1);
  }

  .header-main-title-icon a.active {
    filter: invert(0);
    opacity: 1;
  }






</style>
